<d-button (btnClick)="addWidget()">Add a widget</d-button>
<d-button [bsStyle]="'common'" (btnClick)="deleteWidget(widgets.length - 1)">Delete the last widget</d-button>
<d-dashboard #dashboard="dDashboard" class="dashboard">
  <d-dashboard-widget
    *ngFor="let widget of widgets; let index = index"
    [(x)]="widget.x"
    [(y)]="widget.y"
    [(width)]="widget.width"
    [(height)]="widget.height"
    [minWidth]="widget.minWidth"
    [minHeight]="widget.minHeight"
    [maxWidth]="widget.maxWidth"
    [maxHeight]="widget.maxHeight"
    [locked]="widget.locked"
    [noMove]="widget.noMove || widget.locked"
    [noResize]="widget.noResize || widget.locked"
    [autoPosition]="widget.autoPosition"
    class="widget"
  >
    <div class="index">{{ index + 1 }}</div>
    <div class="content">
      <div>
        <div>
          <span>Coordinates</span><span class="coordinate">{{ widget.x }} , {{ widget.y }}</span>
        </div>
        <div>
          <span>Width & Height</span><span class="size">{{ widget.width }} x {{ widget.height }}</span>
        </div>
        <div *ngIf="widget.locked"><span>Lock position</span></div>
        <div *ngIf="widget.noMove"><span>Lock drag move</span></div>
        <div *ngIf="widget.noResize"><span>Lock drag size</span></div>
      </div>
    </div>
  </d-dashboard-widget>
  <d-dashboard-widget [minWidth]="2" [maxWidth]="5" class="widget">
    <div class="content"><div>Independent use</div></div></d-dashboard-widget
  >
</d-dashboard>
